
<nz-card>
    <form nz-form  nzLayout="horizontal">
        <div nz-row [nzGutter]="16">
          <div nz-col nzMd="6">
            <nz-form-item>
              <nz-form-label>姓名</nz-form-label>
              <nz-form-control>
                <input nz-input [ngModelOptions]="{ standalone: true }" [(ngModel)]="check.personnelName" placeholder="请输入" />
              </nz-form-control>
            </nz-form-item>
          </div>


          <div nz-col nzMd="6">
            <nz-form-item>
                <nz-form-label>状态</nz-form-label>
                <nz-form-control>
                  <nz-select nzPlaceHolder="请选择" [ngModelOptions]="{ standalone: true }" [(ngModel)]="check.personnelCondition">
                    <nz-option nzValue="在职" nzLabel="在职"></nz-option>
                    <nz-option nzValue="外出" nzLabel="外出"></nz-option>
                    <nz-option nzValue="请假" nzLabel="请假"></nz-option>
                    <nz-option nzValue="离职" nzLabel="离职"></nz-option>
                  </nz-select>
                </nz-form-control>
              </nz-form-item>
           </div>

           <div nz-col nzMd="6">
            <nz-form-item>
              <nz-form-label>部门</nz-form-label>
              <nz-form-control>
                <nz-select nzPlaceHolder="请选择" [ngModelOptions]="{ standalone: true }" [(ngModel)]="check.personnelDepartment">
                  <nz-option nzValue="人事部" nzLabel="人事部"></nz-option>
                  <nz-option nzValue="销售部" nzLabel="销售部"></nz-option>
                  <nz-option nzValue="售后部" nzLabel="售后部"></nz-option>
                  <nz-option nzValue="后勤部" nzLabel="后勤部"></nz-option>
                  <nz-option nzValue="产品部" nzLabel="产品部"></nz-option>
                </nz-select>
              </nz-form-control>
            </nz-form-item>
           </div>

           <div nz-col nzFlex="auto">
             <button nz-button nzType="primary" (click)="sumbit()"><i nz-icon nzType="search"></i>查询</button>
             <button nz-button type="button" (click)="reset()"><i nz-icon nzType="undo"></i>重置</button>
           </div>

        </div>

        <div>
          
        </div>
    </form>
</nz-card>


<!--nzBordered 是否展示外边框和列边框
    nzData --数据数组
    nzShowSizeChanger -- 是否可以改变 nzPageSize
    nzFrontPagination   是否在前端分页
    nzShowPagination 是否显示分页器
    nzPageSize    页面大小
    nzTotal  当前总数据条数
    nzPageIndex   当前页码    -->
<nz-card>
  <div style="margin-bottom: 8px;">
    <button nz-button nzType="primary" (click)="add()">新增员工</button>
  </div>
  <nz-table
      [nzBordered]="true" 
      #nzTable
      [nzData]="operationData"
      nzShowSizeChanger
      [nzFrontPagination]="false"
      [nzShowPagination]="true"
      [(nzPageSize)]="pageSize"
      [nzTotal]="pageTotal"
      [(nzPageIndex)]="pageIndex"
      (nzPageIndexChange)="nzPageIndexChange()"
      (nzPageSizeChange)="nzPageSizeChange()"
      >

      <thead>
          <tr>
            <th nzWidth="20px" nzAlign="center">编号</th>
            <th nzWidth="30px" nzAlign="center">姓名</th>
            <th nzWidth="50px" nzAlign="center">性别</th>
            <th nzWidth="50px" nzAlign="center">出生日期</th>
            <th nzWidth="50px" nzAlign="center">状态</th>
            <th nzWidth="70px" nzAlign="center">学历</th>
            <th nzWidth="50px" nzAlign="center">部门</th>
            <th nzWidth="50px" nzAlign="center">职务</th>
            <th nzWidth="50px" nzAlign="center">资薪</th>
            <th nzWidth="50px" nzAlign="center">操作</th>
          </tr>
        </thead>

        <tbody>
          <tr *ngFor="let item of nzTable.data; let i = index">
            <td nzAlign="center">{{ item.personnelId }}</td>
            <td nzAlign="center">{{ item.personnelName }}</td>
            <td nzAlign="center">{{ item.personnelSex }}</td>
            <td nzAlign="center">{{ item.personnelBirthday | date: 'yyyy-MM-dd' }}</td>
            <td nzAlign="center">{{ item.personnelCondition }}</td>
            <td nzAlign="center">{{ item.personnelAcademicDegree }}</td>
            <td nzAlign="center">{{ item.personnelDepartment  }}</td>
            <td nzAlign="center">{{ item.personnelPost }}</td>
            <td nzAlign="center">{{ item.personnelSalary }}</td>
            <td nzAlign="center"><a (click)="update(item.personnelId)">编辑</a>&nbsp;&nbsp;  
              <a (click)="showModal(item.personnelId)">删除</a></td>
          </tr>
        </tbody>

  </nz-table>
</nz-card>

<!-- 抽屉 -->
<nz-drawer
  [nzBodyStyle]="{ height: 'calc(100% - 55px)', overflow: 'auto', padding: '0pc 0px 53px 50px' }"
  [nzVisible]="visible"
  (nzOnClose)="close()"
  [nzMaskClosable]="false"
  [nzWidth]="800"
  [nzTitle]="ruleTitle"
  
>
  <p style="padding-top: 30px">编号：{{ id }}</p>
  <!-- <p>所属模块：{{ seeData.module }}</p>
  <p>操作类型：{{ seeData.type }}</p>
  <p>操作人员：{{ seeData.personnel }}</p>
  <p>ip地址：{{ seeData.ip }}</p>
  <p>操作时间：{{ seeData.date | date: 'yyyy-MM-dd HH:mm' }}</p>
  <p>操作内容：{{ seeData.sql }}</p> -->
  <form nz-form (ngSubmit)="addData()">
    <div nz-row [nzGutter]="12">
      <div nz-col nzMd="11">
        <nz-form-item>
          <nz-form-label nzRequired>姓名</nz-form-label>
          <nz-form-control nzErrorTip="姓名不能为空！！！" nzValidatingTip="校检中...">
            <input nz-input [ngModelOptions]="{ standalone: true }" [(ngModel)]="temporaryData.personnelName"  type="text" placeholder="请输入" >
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzMd="11">
        <nz-form-item>
          <nz-form-label nzRequired>性别</nz-form-label>
          <nz-form-control>
            <nz-select nzPlaceHolder="请选择" [ngModelOptions]="{ standalone: true }"  [(ngModel)]="temporaryData.personnelSex" >
              <nz-option [nzValue]="1" nzLabel="男"></nz-option>
              <nz-option [nzValue]="0" nzLabel="女"></nz-option>
            </nz-select>
            
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzMd="2"></div>

      <div nz-col nzMd="11">
        <nz-form-item>
          <nz-form-label nzRequired>出生日期</nz-form-label>
          <nz-form-control>
            <nz-date-picker  [ngModelOptions]="{ standalone: true }"  [(ngModel)]="temporaryData.personnelBirthday">

            </nz-date-picker>
    
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzMd="11">
        <nz-form-item>
          <nz-form-label nzRequired>状态</nz-form-label>
          <nz-form-control>
            <nz-select nzPlaceHolder="请选择" [ngModelOptions]="{ standalone: true }" [(ngModel)]="temporaryData.personnelCondition">
              <nz-option nzValue="在职" nzLabel="在职"></nz-option>
              <nz-option nzValue="外出" nzLabel="外出"></nz-option>
              <nz-option nzValue="请假" nzLabel="请假"></nz-option>
              <nz-option nzValue="离职" nzLabel="离职"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzMd="2"></div>

      <div nz-col nzMd="11">
        <nz-form-item>
          <nz-form-label nzRequired>学历</nz-form-label>
          <nz-form-control>
            <nz-select nzPlaceHolder="请选择"  [ngModelOptions]="{ standalone: true }"  [(ngModel)]="temporaryData.personnelAcademicDegree">
              <nz-option nzValue="高中及以下" nzLabel="高中及以下"></nz-option>
              <nz-option nzValue="专科" nzLabel="专科"></nz-option>
              <nz-option nzValue="本科" nzLabel="本科"></nz-option>
              <nz-option nzValue="硕士" nzLabel="硕士"></nz-option>
              <nz-option nzValue="博士" nzLabel="博士"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzMd="11">
        <nz-form-item>
          <nz-form-label nzRequired>部门</nz-form-label>
          <nz-form-control>
            <nz-select nzPlaceHolder="请选择"  [ngModelOptions]="{ standalone: true }"  [(ngModel)]="temporaryData.personnelDepartment">
              <nz-option nzValue="人事部" nzLabel="人事部"></nz-option>
                <nz-option nzValue="销售部" nzLabel="销售部"></nz-option>
                <nz-option nzValue="售后部" nzLabel="售后部"></nz-option>
                <nz-option nzValue="后勤部" nzLabel="后勤部"></nz-option>
                <nz-option nzValue="产品部" nzLabel="产品部"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzMd="2"></div>

      <div nz-col nzMd="11">
        <nz-form-item>
          <nz-form-label nzRequired>职务</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="请输入"  [ngModelOptions]="{ standalone: true }"  [(ngModel)]="temporaryData.personnelPost">
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzMd="11">
        <nz-form-item>
          <nz-form-label nzRequired>资薪</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="请输入" [ngModelOptions]="{ standalone: true }"  [(ngModel)]="temporaryData.personnelSalary">
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzMd="2"></div>

      <div >
        <button nz-button nzType="primary" ><i nz-icon nzType="check" nzTheme="outline"></i>提交</button>
      </div>
    </div>
  </form>

</nz-drawer>

<!-- 删除对话框 -->
<nz-modal [(nzVisible)]="isVisible" nzTitle="  " (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
  <p>你确定要删除该人员吗？</p>
</nz-modal>





